import { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import "../assets/css/catelist.css";
import { getGoods } from "../request/api";
function Catelist() {
  let [catelist, setcatelist] = useState([]);
  useEffect(() => {
    getGoods().then((res) => {
      console.log(res);
      if (res.code == 200) {
        setcatelist(res.list);
      }
    });
  }, []);
  return (
    <div id="catelist">
      <header>
        {/* 顶部信息 */}
        <div className="top_box">
          {/* 左箭头 */}
          <a href="">
            <span className="iconfont icon-zuojiantou"></span>
          </a>
          <h2>小U优选</h2>
        </div>
        <div className="search">
          <input
            type="text"
            className="iconfont"
            placeholder="&#xe6d1; 按内容搜索"
          />
          <span>搜索</span>
        </div>
        {/* 综合推荐 */}
        <div className="recommend">
          <ul>
            <li>
              <a href="">综合推荐</a>
            </li>
            <li>
              <a href="">销量</a>
            </li>
            <li>
              <a href="">价格</a>
              <span className="iconfont icon-jiage"></span>
            </li>
            <li>
              <a href="">好评度</a>
            </li>
            <li>
              <a href="">店铺</a>
            </li>
            <li>
              <span className="iconfont icon-shaixuan"></span>
              <a href="">筛选</a>
            </li>
          </ul>
        </div>
      </header>
      <div className="list">
        <div className="list_top">
          <p>筛选11.11大促商品</p>
        </div>
        <div className="list_bot">
          <ul>
            {catelist.map((item) => {
              return (
                <Link to="/detail" state={{id:item.id,type:1}} key={item.id}>
                  <li>
                    <div className="left">
                      <img src={item.img} alt="" />
                    </div>
                    <div className="right">
                      <p>{item.goodsname}</p>
                      <p>{item.description}</p>
                      <p>
                        <span>￥</span>
                        <span>{item.price}</span>
                        <del>￥{item.market_price}</del>
                      </p>
                      <p>11.11限时299元起</p>
                      <p>
                        <span>999条评论</span>
                        <span>99.9%好评</span>
                      </p>
                    </div>
                  </li>
                </Link>
              );
            })}
            {/* <li>
              <div className="left">
                <img src={require("../assets/images/商品列表1.png")} alt="" />
              </div>
              <div className="right">
                <p>水肌美净肤洁面膏 100g/支 深...</p>
                <p>深层清洁肌肤，温和又滋润，日本...</p>
                <p>
                  <span>￥</span>
                  <span>199</span>
                  <del>￥1099</del>
                  <span>999人已付款</span>
                </p>
                <p>11.11限时299元起</p>
                <p>
                  <span>999条评论</span>
                  <span>99.9%好评</span>
                </p>
              </div>
            </li> */}
          </ul>
        </div>
      </div>
    </div>
  );
}
export default Catelist;
